<template>
    <div>
        <Modal v-model="modalStatus"
            :title="title"
            @on-visible-change="visibleChange">
            <Form ref="modal" :model="form" :label-width="56">
                <FormItem label="分值" prop="score">
                    <Input v-model="form.score" 
                        number :placeholder="`输入范围:${minNum}~${maxNum}`"/>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button @click="modalStatus = false;">取消</Button>
                <Button @click="confirm" type="primary">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
export default {
    name: 'grade',
    props: {
        title: {
            type: String,
            default: '评分'
        },
        minNum: {
            type: Number,
            default: 0
        },
        maxNum: {
            type: Number,
            default: 100
        }
    },
    data() {
        return {
            modalStatus: false,
            form: {
                score: ''
            }
        }
    },
    methods: {
        // 模态框隐藏时重置表单，将所有字段值重置为空并移除校验结果
        visibleChange(type) {
            if (!type) {
                this.$refs.modal.resetFields()
            }
        },
        // 确认设置加减分
		confirm() {
            if(!/^\d+(\.\d+)?$/.test(this.form.score)){
                this.$Message.warning(`输入范围:${this.minNum}~${this.maxNum}`)
                return
            }
            if (!this.form.score && this.form.score !== 0) {
                this.$Message.warning(`输入范围:${this.minNum}~${this.maxNum}`)
                return
            }
            if (this.form.score < this.minNum || this.form.score > this.maxNum) {
                this.$Message.warning(`输入范围:${this.minNum}~${this.maxNum}`)
                return
            }
            this.$emit('on-change', this.form.score)
            this.modalStatus = false
        },
        show() {
            this.modalStatus = true
        },
        hide() {
            this.modalStatus = false
        }
    }
}
</script>